<template>
    <div class="container">
        <!-- 搜索框 -->
        <div class="search-box">
            <div class="search-wrapper">
                <img src="~/assets/search.png" class="search-icon" alt="search" />
                <input v-model="searchText" type="text" placeholder="请输入单号查找" class="search-input" @input="fetchOrders" />
                <i v-if="searchText" class="clear-icon" @click="clearSearch"></i>
            </div>
            <div class="cancel-btn">取消</div>
        </div>


        <!-- 订单状态tabs -->
        <div class="order-tabs">
            <div
                v-for="tab in tabsWithCount"
                :key="tab.value"
                :class="['tab-item', { active: currentTab === tab.value }]"
                @click="switchTab(tab.value)"
            >
                {{ tab.label }}({{ tab.count }})
            </div>
        </div>

        <!-- 订单列表 -->
        <div class="order-list">
            <template v-if="filteredOrders.length > 0">
                <div v-for="order in filteredOrders" :key="order.id" class="order-card" @click="goToDetail(order.id)">
                    <!-- 联系人信息 -->
                    <div class="contact-row">
                        <div class="contact-info">
                            <img src="~/assets/dialogue.png" class="contact-icon" alt="contact" />
                            <span class="contact-text">联系 {{ formatName(order.shouh_name) }}</span>
                            <i class="arrow-icon">></i>
                        </div>
                        <div class="order-status">{{ order.order_status }}</div>
                    </div>

                    <!-- 商品信息 -->
                    <div class="product-info">
                        <div class="product-image">
                            <img :src=" order.image" alt="商品图片" />
                        </div>
                        <div class="product-details">
                            <div class="name-flex">
                                <div class="product-name">{{ order.goods_name }}</div>
                                <div class="product-meta">
                                    <div class="product-price">¥{{ order.goods_price }}</div>
                                    <div class="product-quantity">x{{ order.num }}</div>
                                </div>
                            </div>
                            <div class="sku-flex">
                                <div class="product-sku" v-if="order.goods_sku">{{ order.goods_sku }}</div>
                                <div class="actual-price" v-if="order.youh_price">实收: ¥{{ calculateActualPrice(order) }}</div>
                            </div>
                        </div>
                    </div>

                    <!-- 快递信息 -->
                    <div class="express-info" v-if="order.wul_no">
                        <div class="delivery-box">
                            <div class="express-row">
                                <div class="express-left">
                                    <span class="express-label">{{ order.wul_name }}</span>
                                    <span class="express-no">{{ order.wul_no }}</span>
                                    <button class="copy-btn" @click.stop="copyExpressNo(order.wul_no)">复制</button>
                                </div>
                            </div>
                            <div class="delivery-status" v-if="order.wul_status">
                                <img src="~/assets/ok.png" class="status-icon" />
                                <span class="status-text">{{ order.wul_status }}</span>
                            </div>
                        </div>
                        <div class="delivery-icon"></div>
                        <!-- <div class="delivery-time" v-if="order.wul_time">
                            {{ formatTime(order.wul_time) }}
                        </div> -->
                    </div>
                </div>
            </template>
            <div v-else class="empty-tip">暂无相关订单</div>
        </div>
    </div>
</template>

<script>
import axios from 'axios'

export default {
    data() {
        return {
            searchText: '',
            currentTab: 'all',
            tabs: [
                { label: '全部', value: 'all' },
                { label: '待付款', value: '待付款' },
                { label: '待发货', value: '待发货' },
                { label: '待收货', value: '待收货' },
            ],
            orders: [],
            counts: {
                all: 0,
                pending_payment: 0,
                pending_delivery: 0,
                pending_receipt: 0,
            },
        }
    },
    computed: {
        tabsWithCount() {
            const statusMapping = {
                待付款: 'pending_payment',
                待发货: 'pending_delivery',
                待收货: 'pending_receipt',
                all: 'all',
            }

            return this.tabs.map((tab) => ({
                ...tab,
                count: this.counts[statusMapping[tab.value]] || 0,
            }))
        },
        filteredOrders() {
            if (!this.searchText) {
                return this.orders.filter((order) => {
                    if (this.currentTab === 'all') return true
                    return order.order_status === this.currentTab
                })
            }
            return this.orders.filter((order) => {
                const matchSearch = order.order_no.toLowerCase().includes(this.searchText.toLowerCase())
                const matchTab = this.currentTab === 'all' || order.order_status === this.currentTab
                return matchSearch && matchTab
            })
        },
    },
    methods: {
        async fetchOrders() {
            try {
                const response = await axios.get('http://tmp8.iiiii5.cn//api/Order/listall?server=1', {
                    params: {
                        keyword: this.searchText,
                    },
                })
                if (response.data.code === 0) {
                    this.orders = response.data.data
                    this.counts = response.data.count
                }
            } catch (error) {
                console.error('获取订单列表失败', error)
            }
        },
        switchTab(tab) {
            this.currentTab = tab
        },
        formatName(name) {
            if (!name) return ''
            if (name.length <= 1) return name
            return name.charAt(0) + '***'
        },
        formatTime(time) {
            if (!time) return ''
            return new Date(time).toLocaleString('zh-CN', {
                year: 'numeric',
                month: '2-digit',
                day: '2-digit',
                hour: '2-digit',
                minute: '2-digit',
                second: '2-digit',
            })
        },
        calculateActualPrice(order) {
            const totalPrice = order.goods_price * order.num
            return (totalPrice - (order.youh_price || 0)).toFixed(2)
        },
        copyExpressNo(expressNo) {
            navigator.clipboard
                .writeText(expressNo)
                .then(() => {
                    this.$message.success('复制成功')
                })
                .catch(() => {
                    this.$message.error('复制失败，请手动复制')
                })
        },
        clearSearch() {
            this.searchText = ''
            this.fetchOrders()
        },
        goToDetail(id) {
            this.$router.push({
                name: 'orderDetail',
                query: { id },
            })
        },
    },
    created() {
        this.fetchOrders()
    },
}
</script>

<style scoped>
/* 移动端适配样式 */
.container {
    max-width: 750px;
    /* 标准移动端宽度 */
    margin: 0 auto;
    background-color: #f5f5f5;
    min-height: 100vh;
    /* 给底部栏留空间 */
}

.search-box {
    display: flex;
    align-items: center;
    padding: 12px 14px 2px;
    background: #fff;
}

.search-wrapper {
    flex: 1;
    display: flex;
    align-items: center;
    background: #f5f5f5;
    border-radius: 4px;
    padding: 6px 12px;
    margin-right: 10px;
    height: 36px;
    box-sizing: border-box;
}

.search-icon {
    width: 18px;
    height: 18px;
    margin-right: 8px;
}

.search-input {
    flex: 1;
    border: none;
    outline: none;
    font-size: 16px;
    padding: 0;
    background: #f5f5f5;
}

.clear-icon {
    width: 16px;
    height: 16px;
    background: url('../../assets/close.png') no-repeat center center;
    background-size: 100% 100%;
    cursor: pointer;
}

.cancel-btn {
    color: #888;
    font-size: 16px;
}

.order-tabs {
    display: flex;
    justify-content: space-around;
    background: #fff;
    padding: 0;
    border-bottom: 1px solid #eee;
}

.tab-item {
    flex: 0 0 auto;
    text-align: center;
    font-size: 16px;
    color: #666;
    padding: 12px 0;
    position: relative;
}

.tab-item.active {
    color: #333;
    font-weight: bold;
}

.tab-item.active::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 100%;
    height: 2px;
    background: #333;
}

.order-card {
    background: #fff;
    margin-top: 10px;
    padding: 0 14px;
    cursor: pointer;
    transition: all 0.3s ease;
    padding-bottom: 10px;
}

.order-card:active {
    background: #f9f9f9;
    transform: scale(0.99);
}

.contact-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 0;
    border-bottom: 1px solid #e3e3e3;
}

.contact-info {
    display: flex;
    align-items: center;
}

.contact-icon {
    width: 22px;
    height: 22px;
    margin-right: 6px;
    filter: invert(47%) sepia(82%) saturate(1162%) hue-rotate(165deg) brightness(91%) contrast(98%);
}

.contact-text {
    font-size: 16px;
    color: #1296db;
}

.arrow-icon {
    border-top: 1px solid #1296db;
    border-right: 1px solid #1296db;
    width: 10px;
    height: 10px;
    transform: rotate(45deg);
    margin-left: 4px;
    font-size: 0;
}

.order-status {
    color: #333;
    font-size: 16px;
}

.product-info {
    display: flex;
    padding: 12px 0;
}

.product-image {
    width: 70px;
    height: 70px;
    margin-right: 12px;
    border-radius: 4px;
    overflow: hidden;
}

.product-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.product-details {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.name-flex {
    display: flex;
    justify-content: space-between;
    margin-bottom: 8px;
}

.product-name {
    font-size: 16px;
    color: #333;
    line-height: 1.5;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    margin-right: 10px;
    flex: 1;
}

.product-meta {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: flex-end;
    flex: 0 0 auto;
}
.sku-flex {
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.product-price {
    font-size: 16px;
    color: #333;
    font-weight: bold;
}

.product-quantity {
    color: #999;
    font-size: 16px;
}

.product-sku {
    font-size: 16px;
    color: #999;
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
    overflow: hidden;
    margin-right: 10px;
    flex: 1;
}

.actual-price {
    flex: 0 0 auto;
    color: #333;
    font-size: 16px;
    display: flex;
    font-weight: bold;
}
.delivery-box {
    flex: 1;
    margin-right: 10px;
}
.delivery-icon {
    border-top: 1px solid #999;
    border-right: 1px solid #999;
    width: 10px;
    height: 10px;
    transform: rotate(45deg);
}
.express-info {
    padding: 10px;
    background: #f5f5f5;
    border-radius: 4px;
    display: flex;
    align-items: center;
}

.express-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 8px;
}

.express-left {
    display: flex;
    align-items: center;
}

.express-label {
    color: #666;
    font-size: 16px;
    margin-right: 8px;
}

.express-no {
    color: #666;
    font-size: 16px;
}

.copy-btn {
    border: 1px solid #ddd;
    background: #fff;
    color: #666;
    line-height: 1;
    font-size: 14px;
    padding: 4px 6px;
    border-radius: 2px;
    margin-left: 8px;
}

.delivery-status {
    display: flex;
    align-items: center;
    color: #666;
    font-size: 16px;
    line-height: 1.4;
}
.delivery-status .status-icon {
    width: 14px;
    height: 14px;
    margin: 0;
}
.delivery-status .status-text {
    margin-left: 6px;
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.status-icon {
    color: #52c41a;
    margin-right: 6px;
    margin-top: 2px;
}

.delivery-time {
    font-size: 12px;
    color: #999;
    margin-top: 4px;
}

.empty-tip {
    text-align: center;
    padding: 40px 0;
    color: #999;
    font-size: 16px;
}
</style>
